<template>
    <div class="home">
        <header><van-nav-bar title="统计数据" /></header>
        <div class="today-wrapper_all">
            <div class="today-header">今日数据</div>
            <div class="today-wrapper">
            <div class="today-left">
                <div class="text-row"><p>文章发布：</p><p>325</p></div>
                <div class="text-row"><p>登录用户：</p><p>25</p></div>
                <div class="text-row"><p>新增用户：</p><p>5</p></div>
                <div class="text-row"><p>用户总量：</p><p>625</p></div>
            </div>
            <div id="myEcharts" :style="{ width: '245px', height: '120px' }"></div>
        </div>
        </div>
        <div class="week-wrapper">
            <div class="title">
                <div class="title-header">近七天数据</div>
                    <select class="title-select" v-model="currentId" @change="changeDatatype($event)" >
                    <option v-for="(item,index) in dataTypes" :key="index" :value="item.id" >{{ item.text }}</option>
                    </select>
            </div>
            <div id="sevendayEcharts" :style="{ width: '100%', height: '210px' }"></div>
        </div>
        <div class="author-rank">
            <div id="rankEcharts" :style="{ width: '100%', height: '400px' }"></div>
        </div>
    </div>

</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue';
import navbar from '@/components/navbar.vue';
import * as echarts from "echarts";
import dayjs from 'dayjs'
export default {
    setup() {
        const state = reactive({
            currentTime: dayjs().format('YYYY-MM'),
            dataType:0,
            currentId:0,
            dataTypes:[ { text: '文章发布', id: 0 },
                        { text: '登录用户', id: 1 },
                        { text: '新增用户', id: 2 },],
            xAxisValue:[1,2,3,4,5,6,7],
            showData:[754,554,954,554,654,714,225],
            sevenDayData:{
                articles:[754,554,954,554,654,714,225],
                singins:[354,554,654,354,654,714,225],
                signups:[454,554,554,754,654,714,225],
            },

        })
        
        //初始化饼状图函数
        function initTodayChart(){
            let dom = document.getElementById('myEcharts')
            if(echarts.getInstanceByDom(dom)){
                echarts.dispose(dom)
            }
        let chart = echarts.init(document.getElementById('myEcharts'));//初始化
      // 把配置和数据放这里
        chart.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
            type: 'pie',
            data: [
                {
                value: 335,
                name: '交友'
                },
                {
                value: 234,
                name: '寻物'
                },
                {
                value: 1548,
                name: '吐槽'
                },
                {
                value: 1548,
                name: '市场'
                }
            ],
            radius:['50%','80%']
            }
        ]
        });
      window.onresize = function() {
        //自适应大小
        chart.resize();
      };
      return { initTodayChart };
    }
        //初始化折线图函数
        function initSevenDayChart(){
            let dom = document.getElementById('sevendayEcharts')
            if(echarts.getInstanceByDom(dom)){
                echarts.dispose(dom)
            }
            let chart = echarts.init(document.getElementById('sevendayEcharts'))
            chart.setOption({
              legend: {
                 icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                 itemWidth: 10,  // 设置宽度
                 itemHeight: 4, // 设置高度
                 itemGap: 24, // 设置间距
                selectedMode: 'single'
              },
              tooltip: {
                  trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                boundaryGap:false,
                splitLine: {
                    lineStyle: {
                        color: '#29457e'
                    }
                },
                axisLabel:{
    		        interval: 0
    	        },
                data:state.xAxisValue
              },
              yAxis: [
                {
                  type: 'value',
                  axisTick:{       //y轴刻度线
                    show: false
                  },
                  min: 0,
                  max: 1000,
                  interval: 200,
                  axisLabel: {
                    formatter: '{value}'
                  }
                }
              ],
              series: [
                {
                  name: '数量',
                  type: 'line',
                  lineStyle:{  
                    color:'#b1de6a'  
                },
                  data:state.showData,
                }
            ],
            grid:{
                x:50,
                y:48
            }
            }

            )
            window.onresize = function() {
        //自适应大小
            chart.resize();
         };
      return { initSevenDayChart };
    }
        //更换折线图数据
        function changeDatatype(e){
            state.currentId = e.target.value
            if(state.currentId == 0){
                state.showData = state.sevenDayData.articles
            }else if(state.currentId == 1){
                state.showData = state.sevenDayData.singins
            }else if(state.currentId == 2){
                state.showData = state.sevenDayData.signups
            }
            initSevenDayChart()
        }
        //初始化排行榜函数
        function initRankChart(){
            let dom = document.getElementById('rankEcharts')
            if(echarts.getInstanceByDom(dom)){
                echarts.dispose(dom)
            }
            let chart = echarts.init(document.getElementById('rankEcharts'))
            chart.setOption({
            title: {
                text: '作者排行榜',
                left:140
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            grid: {
                left: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                // axisLine:true,
                show:true
            },
            yAxis: {
                type: 'category',
                axisLabel:{
                    show:true,
                    formatter:(value)=>{
                        if (value.length > 12) {
                        return value.substring(0, 5) + "...";
                        } else {
                        return value;
                        }
                    }
                },
                axisLine:{
                    lineStyle:{
                        width: '4'
                    }
                },
                data:['无敌小芳','成魔的人','今天超开心','焦糖布丁','快要饿死了','守护哥哥','IKUN','666','不想睡觉','只因'].reverse(),
                axisTick: {
                show: false
                },
            },
            series:
                {
                name: '文章数量',
                type: 'bar',
                data: [327,399,456,578,599,700,735,777,800,938],
                label:{
                    show: true,     //开启显示
                    position: 'right'    //在上方显示
                    },
                itemStyle:{
                        color: function(params) {
                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622','#c558fb','#91c3a5','#FFD700'];
                        // 自动循环已经有的颜色
                        return colorList[params.dataIndex % colorList.length];
                    }
                }
                }
            })
        }

        onMounted(()=>{
            initTodayChart()
            initSevenDayChart()
            initRankChart()
            //在此向后端取数据

        })


        return {
            ...toRefs(state),
            changeDatatype,
        };
    },
    components: {
        navbar
    },

}
</script>

<style lang="less" scoped>
@import url('../assets/style/custom.less');
.home{
    height: 100%;
    padding: 0 2px;
    header{
        height: 46px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
    }
    .today-wrapper_all{
        border-top: 2px solid #d6d5d5;
        padding: 4px;
        margin-bottom: 20px;
        .today-header{
            text-align: center;
            font-size: 14px;
            line-height: 14px;
            font-weight: 600;
            margin-top: 8px;
        }
        .today-wrapper{
        display: flex;
        height: 120px;
        .today-left{
            width: 130px;
            margin: auto 0;
            .text-row{
                display: flex;
                height: 20px;
                margin: 5px 0;
                padding-left: 10px;
                align-items: center;
                justify-content: space-between;
            }
        }
    }
    }
    
    .week-wrapper{
        text-align: center;
        .title{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            position: relative;
            .title-header{
            font-weight: 600;
            }
            .title-select{
                position: absolute;
                right: 20px;
                top: 10px;
                font-size: 12px;
                outline: none;
                padding: 4px;
                appearance: none;
                text-align: center;
                border: 1px solid #1eb1cb;
            }
        }
        
    }
    .author-rank_heder{
        font-weight: 600;
        font-size: 20px;
    }
}
</style>